<template>
  <div class="songLists" v-if="playlist">
    <!-- 2.所以加 v-if="playlist" 页面加载完成再喧嚷-->
    <div
      class="tapNav"
      :style="{
        'background-image': 'url(' + playlist.coverImgUrl + '?param=140y140)',
      }"
    >
      <!-- <router-link tag="div" to="/home" class="title">
        <span class="iconfont icon-arrow-left-bold"></span>
        歌单
      </router-link> -->
      <div class="title" @click="previous">
        <span class="iconfont icon-arrow-left-bold"></span>
        歌单
      </div>
      <div class="icons">
        <span class="iconfont icon-search"></span>
        <span class="iconfont icon-gengduo"></span>
      </div>
    </div>
    <div class="infos">
      <!-- 背景效果 -->
      <div
        class="bg"
        :style="{
          'background-image': 'url(' + playlist.coverImgUrl + '?param=140y140)',
        }"
      ></div>
      <div class="img">
        <!--1. coverImgUrl加载时页面还未渲染，会报错 -->
        <img :src="playlist.coverImgUrl + '?param=140y140'" alt="" />
        <div class="players">
          <div class="num">
            <span class="iconfont icon-bofang"></span>
            {{ playlist.playCount | playCountNum }}
          </div>
        </div>
      </div>
      <div class="content">
        <div class="title">
          {{ playlist.name }}
          <span class="iconfont icon-arrow-down-bold"></span>
        </div>
        <div class="description">
          {{ playlist.description }}
        </div>
      </div>
      <div class="bottomNav">
        <!-- 点赞 -->
        <div class="item" @click="listSubscribe">
          <span class="iconfont icon-shoucang2"></span>
          {{ playlist.subscribedCount | playCountNum }}
        </div>
        <!-- 评论 -->
        <router-link
          tag="div"
          class="item"
          :to="'/commentFun?id=' + playlist.id"
        >
          <span class="iconfont icon-pinglun"></span>
          {{ playlist.commentCount | playCountNum }}
        </router-link>
        <!-- 分享 -->
        <div class="item" @click="showShare = true">
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            @click="cancel"
          />
          <span class="iconfont icon-31fenxiang"></span>
          {{ playlist.shareCount | playCountNum }}
        </div>
      </div>
    </div>
    <van-sticky :offset-top="40">
      <div class="playerAll">
        <div class="btn">
          <span class="iconfont icon-bofang"></span>
        </div>
        <h3 @click="playAll">播放全部</h3>
        <p>({{ playlist.tracks.length }})</p>
      </div>
    </van-sticky>
    <ul class="listsData">
      <!-- 播放列表 -->
      <li
        v-for="(item, index) in playlist.tracks"
        :key="item.id"
        @click="setId(item.id)"
      >
        <i>{{ index + 1 }}</i>
        <div class="title">
          <h2>
            {{ item.name }}
            <!-- <span>(Im a fish)</span> -->
          </h2>
          <p>{{ item.ar[0].name }}</p>
        </div>
        <div class="icons">
          <span class="iconfont icon-gengduo"></span>
        </div>
      </li>
    </ul>
    <div class="cancel" v-if="showShare" @click="showShare = false"></div>
  </div>
</template>

<script>
//引入新接口
import { getPlaylistDetail, setPlaylistSubscribe } from "../api/song";
import { Toast } from "vant";

export default {
  data() {
    return {
      playlist: null,
      showShare: false,
      cancel: true,
      t: null, // 类型,1:收藏,2:取消收藏
      listid: 5059661515, //歌单 id
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    setPlaylistSubscribeFun() {
      setPlaylistSubscribe({ id: this.listid, t: this.t }).then((data) => {
        console.log("收藏是否成功===>", data);
        Toast({
          message: this.message,
          position: "top",
        });
      });
    },
    //收藏按钮
    listSubscribe() {
      // console.log("类型,1:收藏,2:取消收藏===>", this.t);
      this.shoucang = !this.shoucang;
      this.setPlaylistSubscribeFun();
      if (this.shoucangn) {
        this.t = 2;
        this.message = "已取消收藏";
      } else {
        this.t = 1;
        this.message = "收藏成功";
      }
      this.$toast({
        message: "收藏成功",
        position: "top",
      });
    },
    //返回上一页
    previous() {
      this.$router.go(-1);
      // console.log(this.$router.go(-1), "返回上一页");
    },
    // 请求数据
    getPlaylistDetailFun() {
      // console.log(this.$route, "1");
      let id = this.$route.query.id;
      if (!id) {
        return;
      }
      //获取某个页面的歌单
      getPlaylistDetail({ id: id }).then((data) => {
        // console.log(data, "歌单");
        this.playlist = data.playlist;
        // console.log(this.playlist, "1111");
      });
    },
    // 把音乐id传给app.vue组件,获取点击了那首歌曲
    setId(id) {
      this.$emit("get-player-id", id);
      this.$emit("get-play-all-id", this.$route.query.id);
    },
    //点击全部播放
    playAll() {
      this.$emit("get-player-id", this.playlist.tracks[0].id); //获取第一首歌
      this.$emit("get-play-all-id", this.$route.query.id);
    },
    //提示
    // hint() {
    //   // console.log(this.$toast('操作太快了'))
    //   this.$toast({
    //     message: "你操作太快了，请休息一下在尝试",
    //     // position: 'top',
    //   });
    // },
    //分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  //生命钩子已创建
  created() {
    this.getPlaylistDetailFun();
  },
  //DOM挂载之后
  // mounted() {
  //     this.$toast('提示文案');
  // },
  //   过滤器
  filters: {
    playCountNum(value) {
      //123 0000
      if (value < 10000) {
        return value;
      }
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less">
.songLists {
  .tapNav {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    background-size: 10000% 10000%;
    // color: rgb(75, 66, 66);
    color: #fff;
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    font-size: 18px;

    .title {
      .iconfont {
        font-size: 20px;
        margin: 0px 14px;
        // color: #f6f6f6;
      }
    }
    .icons {
      .iconfont {
        font-size: 20px;
        margin-right: 14px;
        &.icon-gengduo {
          display: inline-block;
          transform: rotate(90deg);
        }
      }
    }
  }
  .infos {
    padding-top: 40px;
    height: 148px;
    // background-color: #5D5166;
    border-bottom-right-radius: 50% 5px;
    border-bottom-left-radius: 50% 5px;
    display: flex;
    position: relative;
    margin-bottom: 30px;
    .bg {
      // background: url("https://p1.music.126.net/ZVMvmb599lEPF2KxTt9gvQ==/109951165807960507.jpg?param=140y140") no-repeat center center;
      background-size: 10000%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
      width: 100%;
      height: 100%;
      border-bottom-right-radius: 50% 5px;
      border-bottom-left-radius: 50% 5px;
      filter: blur(1px);
    }
    .img {
      margin: 10px;
      width: 95px;
      height: 95px;
      position: relative;
      border-radius: 7px;
      overflow: hidden;
      .players {
        position: absolute;
        top: 2px;
        right: 2px;
        height: 14px;
        line-height: 14px;
        color: #fff;
        background-color: rgba(197, 197, 197, 0.6);
        border-radius: 7px;
        font-size: 10px;

        .num {
          transform: scale(0.8);
          .iconfont {
            font-size: 8px;
          }
        }
      }
      img {
        width: 95px;
        height: 95px;
      }
    }
    .content {
      flex: 1;
      padding-top: 10px;
      .title {
        font-size: 15px;
        color: #fff;
        line-height: 18px;
        padding-right: 33px;
        height: 36px;
        overflow: hidden;
        position: relative;
        span {
          display: inline-block;
          position: absolute;
          top: 0px;
          right: 15px;
          font-size: 18px;
        }
      }
      .description {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        height: 14px;
        width: 90%;
        margin-top: 42px;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        overflow: hidden;
      }
    }
    .bottomNav {
      position: absolute;
      bottom: -17px;
      left: 0px;
      right: 0px;
      margin: auto;
      width: 60%;
      display: flex;
      height: 34px;
      line-height: 34px;
      background-color: #fff;
      border-radius: 17px;
      box-shadow: 0px 3px 8px #f6f6f6;
      .item {
        text-align: center;
        flex: 1;
        font-size: 14px;
        position: relative;
        .iconfont {
          font-size: 17px;
        }
        &::after {
          content: "";
          display: block;
          width: 1px;
          height: 16px;
          background-color: #e8e8e9;
          position: absolute;
          top: 9px;
          right: 0px;
        }
        &:last-of-type::after {
          width: 0px;
        }
      }
    }
  }
  .playerAll {
    height: 41px;
    line-height: 41px;
    display: flex;
    z-index: 20;
    background-color: #fff;
    width: 100%;
    .btn {
      margin: 13px 11px 0px 11px;
      height: 16px;
      width: 16px;
      line-height: 16px;
      background-color: #ff3a29;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      font-size: 10px;
      .iconfont {
        display: inline-block;
        transform: scale(0.5);
      }
    }
    h3 {
      color: #141414;
    }
    p {
      font-size: 13px;
      color: #a3a3a3;
      line-height: 44px;
    }
  }
  .listsData {
    li {
      height: 47px;
      display: flex;
      i {
        font-style: normal;
        width: 38px;
        line-height: 47px;
        color: #9e9e9e;
        font-size: 13px;
        text-align: center;
      }
      .title {
        flex: 1;
        h2 {
          margin-top: 5px;
          font-size: 15px;
          color: #111111;
          height: 20px;
          line-height: 20px;
          overflow: hidden;
          span {
            color: #8e8e8e;
          }
        }
        p {
          height: 17px;
          line-height: 17px;
          font-size: 12px;
          color: #8e8e8e;
        }
      }
      .icons {
        width: 27px;
        font-size: 20px;
        line-height: 47px;
        .iconfont {
          height: 20px;
          line-height: 20px;
          width: 20px;
          margin-top: 10px;
          display: inline-block;
          transform: rotate(90deg);
        }
      }
    }
  }
  .cancel {
    z-index: 2053;
    position: fixed;
    height: 52%;
    width: 100%;
    // background-color: red;
    top: 0px;
    left: 0px;
  }
}
</style>